<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue"
import { requestsongListAllSong } from "../../../utils/axiosURL"
import { useRoute } from 'vue-router';
import useSongURLStore from "../../../store/songURL"

const songURLStore = useSongURLStore()
const router = useRoute()
// 歌单ID
const songListID = ref<any>(router.params.id)
const songListIDQuery = ref<any>(router.query.id)
// 存储所有歌曲数据
const allSong = reactive<any>([])

// 获取歌单所有歌曲
const requestSongListAllSongFn = () => {
  requestsongListAllSong(songListID.value === ':id' ? songListIDQuery.value : songListID.value).then((data: any) => {
    allSong.values = data.songs
    songURLStore.initPlayList(data.songs)
    localStorage.setItem("playList", JSON.stringify(data.songs))
  }).catch(_ => { })
}
onMounted(() => {
  requestSongListAllSongFn()
})

</script>


<template>
  <div v-if="allSong.values.length !== 0" class="table">
    <songDetailSongTable :songList=allSong.values />
  </div>
  <div v-else class="listSkeleton">
    <el-skeleton animated :rows="15" />
  </div>
</template>


<style lang="scss" scoped>
.table {
  width: 100%;
  height: auto;
  margin-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
}

.listSkeleton {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
</style>
